import React, { useState } from 'react'
import { MessageCircle, X } from 'lucide-react'
import { ChatWindow } from './ChatWindow'

export const ChatFloatingButton: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false)

  const toggleChat = () => {
    setIsOpen(!isOpen)
  }

  return (
    <>
      {/* 悬浮按钮 */}
      <div
        onClick={toggleChat}
        className={`fixed top-1/3 right-1 rounded-full shadow-lg transition-all duration-300 z-40 transform -translate-y-1/3 text-white flex items-center justify-center hover:scale-110 active:scale-95`}
        title={isOpen ? '关闭聊天' : '打开AI助手'}
      >
        {isOpen ? (
          <span/>
        ) : (
          <img src="https://pub-d9c5812daa2b44e5b6d7b6621bbeb301.r2.dev/logo/pcIcon0.png" className="w-[50px] h-[110px]" />
        )}
      </div>

      {/* 聊天窗口 */}
      <ChatWindow isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </>
  )
}
